<template>
  <div class="Affiche">
    <div class="title">滚动公告</div>
    <div class="sub_title">
      图标样式
      <!-- <el-button type="primary" class="save_btn" round @click="saveData"
        >保存配置</el-button
      > -->
    </div>
    <div class="img_msg">
      <div class="left">
        <el-upload
          :action="imageUploadUrl"
          :show-file-list="false"
          :headers="{ 'X-BUSINESS-TOKEN': $store.state.user.token }"
          :before-upload="handleImgBefore"
          :on-success="
            (res, file) => {
              return handleImgSuccess(res, file, 'pic');
            }
          "
          :style="{ width: 88 + 'px', height: 88 + 'px' }"
          class="app-uploader-img-plus"
        >
          <el-image
            v-if="imageUrl || defaultImg"
            :style="{ width: 88 + 'px', height: 88 + 'px' }"
            :src="`${fileBaseUrl}${imageUrl ? imageUrl : defaultImg}`"
            class="img"
            fit="contain"
          />
          <i
            v-else
            :style="{ width: 88 + 'px', height: 88 + 'px' }"
            class="el-up"
          />
        </el-upload>
      </div>
      <div class="right">
        <div class="btn" @click="changeImg">恢复默认</div>
        <div>建议尺寸88*88像素</div>
      </div>
    </div>
    <div class="radio">
      <div>活动方向：</div>
      <el-radio v-model="radio" :label="1">向上</el-radio>
      <el-radio v-model="radio" :label="2">向下</el-radio>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import { imgUploadUrl } from "@/api/upload";

export default {
  data() {
    return {
      type: "",
      radio: 1,
      imageUrl: "",
      defaultImg: "/img/canyin/affiche_bg.png",
      imageUploadUrl: imgUploadUrl,
      activeModule: "",
    };
  },
  computed: {
    ...mapGetters(["activePageForm", "fileBaseUrl"]),
  },
  watch:{
    radio(){
      console.log(11111)
      this.saveData()
    }
  },
  methods: {
    changeImg() {
      this.imageUrl = ''
      this.saveData()
    },
    handleImgSuccess(res, file, type) {
      if(res.code == 0){
          this.imageUrl = res.data.path;
          this.saveData()
      }
    },
    handleImgBefore(file) {
      return this.beforeUploadImg(file, this, 0, 0, 1, ["JPG", "PNG", "GIF"]);
    },
    saveData() {
      let { radio, imageUrl, defaultImg, activeModule } = this;
      let affichePar = {
        radio,
        imageUrl: imageUrl ? imageUrl : defaultImg,
      };
      this.activePageForm.modules[activeModule].biz.params = affichePar;
      this.$store.dispatch(
        "setActivePageForm",
        JSON.parse(JSON.stringify(this.activePageForm))
      );
    },
  },
  mounted() {
    this.activeModule = this.activePageForm.activeModuleIndex;
    let { params } =
      this.activePageForm.modules[this.activePageForm.activeModuleIndex].biz;
    if (params) {
      this.radio = params.radio;
      this.imageUrl = params.imageUrl;
    }else{
      this.saveData()
    }
  },
};
</script>

<style lang="scss" scoped>
.Affiche {
  .title {
    font-size: 18px;
    font-weight: bold;
  }
  .img_msg,
  .radio,
  .sub_title {
    padding-left: 10px;
  }
  .sub_title {
    margin: 20px 0;
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
  }
  .img_msg {
    display: flex;
    .left {
      // width: 88px;
      // height: 88px;
      // background: #ccc;
    }
    .right {
      font-size: 14px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: 10px;
      .btn {
        color: #2b65ff;
        cursor: pointer;
      }
    }
  }
  .radio {
    display: flex;
    > div {
      margin-right: 10px;
    }
    margin-top: 20px;
  }
  //   .avatar-uploader .el-upload {
  //   border: 1px dashed #d9d9d9;
  //   border-radius: 6px;
  //   cursor: pointer;
  //   position: relative;
  //   overflow: hidden;
  // }
  // .avatar-uploader .el-upload:hover {
  //   border-color: #409EFF;
  // }
  // .avatar-uploader-icon {
  //   // font-size: 28px;
  //   // color: #8c939d;
  //   // width: 178px;
  //   // height: 178px;
  //   // line-height: 178px;
  //   // text-align: center;
  // }
  .save_btn {
    padding: 6px 12px;
  }
  .el-up {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  // .avatar {
  //   // width: 178px;
  //   // height: 178px;
  //   // display: block;
  // }
}
</style>
